<!--<script setup>-->
<!--</script>-->
<!--<template>-->
<!--    <div>这是咨询管理页面</div>-->
<!--</template>-->
<!--<style scoped>-->
<!--</style>-->

<script setup>
import { ref, onMounted } from 'vue';

import axios from 'axios';

/*响应式数据*/
//搜索条件
let searchContent = ref('');//搜索内容
//列表数据
let evaluationList = ref([]);//评价列表
//分页数据
const currentPage = ref(1);//当前页码
const pageSize = ref(5);//每页显示的记录数
const total = ref(0);//总记录数

let isLoading = ref(false);//加载中
let multipleSelection = ref([]);//多选


// 挂载时获取数据
onMounted(() => {
  currentPage.value = 1;
  pageSize.value = 5;
  fetchEvaluationList();
});
// 获取评价列表
const fetchEvaluationList = async () => {
  isLoading.value = true;
  console.log(searchContent.value)
  try {
    const response = await axios.get('/api/consultConmment/getAllPage', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        evaluationContent : searchContent.value

      }
    });
    const data = response.data.data; // 从返回数据中提取实际的数据对象
    evaluationList.value = data.list; // 赋值评价列表数据
    total.value = data.total; // 赋值总记录数
    currentPage.value = data.pageNum; // 赋值当前页码
    pageSize.value = data.pageSize; // 赋值每页记录数
    console.log(evaluationList.value);

  } catch (error) {
    console.error('获取评价列表失败', error);
  } finally {
    isLoading.value = false;
  }
};
//获取评价列表
/*
onMounted(()=>{
  axios.get('/api/consultConmment/details', {
    params: {
    }
  }).then(resp=>{
    console.log(resp);
    const pageInfo = resp.data.data;
    evaluationList.value = pageInfo.list;

  })
})
*/

// 搜索
const handleSearch = () => {

  fetchEvaluationList();
};


const handleDelete = async (id) => {
  const confirmDelete = window.confirm('确定要删除该条记录吗？');
  if (confirmDelete) {
    try {
      await axios.put(`/api/consultConmment/removeluoji/${id}`);
      console.log('删除成功');
      fetchEvaluationList();
    } catch (error) {
      console.log('删除失败', error)
      console.error('删除失败', error);
    }
  }
};

// 批量删除
/*const handleBatchDelete = async () => {
  if (multipleSelection.value.length === 0) {
    return;
  }
  try {
    await axios.delete('/api/consultConmment/batchRemove', {
      ids: multipleSelection.value.map(item => item.id)
    });
    fetchEvaluationList();
    multipleSelection.value = [];
  } catch (error) {
    console.error('批量删除评价失败', error);
  }
};*/
async function handleBatchDelete() {
  const confirmDelete = window.confirm('确定要删除所选记录吗？');
  if (confirmDelete) {
    const remove = async () => {
      //将多选选中的多行数据的id数组，传递给ids
      const ids = multipleSelection.value.map(item => item.id);
      try {
        const response = await axios.delete('/api/consultConmment/batchRemove', {
          data: ids
        });
        console.log(response.data)
      } catch (error) {
        console.log(error)
      }
    }
    await remove();
    fetchEvaluationList();
  }
}

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchEvaluationList();
};

// 分页当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchEvaluationList();
};

const array = (val) => {
  multipleSelection.value = val;
}
</script>

<template>
  <div class="user-evaluation-management">
    <div style="padding: 10px 0;border-bottom: solid 1px #cccccc; border-top: solid 1px #cccccc;margin-bottom: 15px">
      <text style="font-weight: 600">首页</text> / 咨询预约管理 / 用户评价管理
    </div>
    <el-row :gutter="10" class="mb-20">
      <el-col :span="12">
        <el-input
            v-model="searchContent"
            placeholder="请输入评价内容"
            suffix-icon="el-icon-search"
            @keyup.enter="handleSearch"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </el-col>
    </el-row>

    <el-table
        v-loading="isLoading"
        :data="evaluationList"
        border
        row-key="id"
        style="width: 100%"
        @selection-change="array"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column label="评价内容" prop="evaluationContent"></el-table-column>
      <el-table-column label="用户昵称" prop="userName"></el-table-column>
      <el-table-column label="咨询师" prop="consultantName"></el-table-column>
      <el-table-column label="评价星级" prop="evaluationStar"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
              type="danger"
              size="small"
              @click="handleDelete( scope.row.id)"
              style="color: #ffffff"
          >
            删除咨询
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 15px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"

      ></el-pagination>
    </div>
  </div>
</template>

<style scoped>
.user-evaluation-management {
  padding: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>